<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>后端写死搜索加事件防抖</title>
    <style>
    #box{
        display:block;        
    }
    </style>
</head>

<body>
    请输入：<input type="text" id="music" oninput="getMusic()" />
    <ul id="box">

    </ul>
</body>
</html>
<!-- oninput一边输入一边触发 -->
<script src="js/ajaxTools.js"></script>
<script>
	function showMusic(str){
		// console.log(str);
		//JSON.parse()把字符串类型转化成json对象(数组)
		//事件防抖
		let arr = JSON.parse(str);
		let htmlStr="";
		for(let i=0;i<arr.length;i++){
			htmlStr+=`<li>${arr[i]}</li>`;
		}
		getId("box").innerHTML = htmlStr;
		console.log(htmlStr);
	}
	
	let myTimer=null;
	
	function getMusic(){
		if(myTimer!=null){
			window.clearTimeout(myTimer)
		}
		myTimer=setTimeout(function(){
			ajax2013("get","getMusic.php","query=" + getId("music").value, showMusic,true);
		},200)
	}
	

    function getId(str){
        return document.getElementById(str);
    }

</script>